<template>
    <div v-show="showDialog1">
        <div class="add-address-show1">
            <div class="title1">
                <div>支付订单</div>
                <img :src="$global.Image.icon_close" @click="reload" />
            </div>
            <div class="company-info">
                <div class="info red">公司名称：{{transferInfo.transfer_company}}</div>
                <div class="info">税号：{{transferInfo.transfer_tax}} </div>
                <div class="info">单位地址：{{transferInfo.transfer_address}} </div>
                <div class="info">电话号码：{{transferInfo.transfer_phone}}</div>
                <div class="info">开户银行：{{transferInfo.transfer_bank}}</div>
                <div class="info">银行账户：{{transferInfo.transfer_number}}</div>
            </div>
            <div class="border1">
                <div class="title">填写支付金额</div>
                <div class="input">
                    <div class="">￥</div>
                    <input type="text" v-model="amount">
                </div>
                <div class="title">上传凭证</div>
                <div style="height:20px"></div>
                <el-upload :action="url" list-type="picture-card" :data="qiniuData" :limit="9" :on-success="handleAvatarSuccess_one" :multiple="false" name="files[]">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="item" alt="" v-for="(item,index) in dialogImageUrl" :key="index">
                </el-dialog>
            </div>
            <div class="confirmPay" @click="pay">确认支付</div>
        </div>
        <div class="dialog-shade"></div>
    </div>
</template>
<script>
import { qiniuToken, transforPay } from "@api/public";
import {
    getUser,
    getMyMessage,
    getMonthSelf,
    getOrderId,
    payMonth,
    payOrder,
} from "@api/user";
export default {
    props:["uni"],
    data() {
        return {
            showDialog1: false,
            transferInfo: {},
            qiniuDomail: "",
            url: "http://gongchangguanjia.3todo.com/api/article/upload",
            qiniuData: {},
            amount:"",
            dialogImageUrl:[]
        };
    },
    mounted() {
        this.getTransfronPay();
        this.getQiniuToken()
    },
    methods: {
         // upload img
        getQiniuToken() {
            qiniuToken()
                .then((res) => {
                    this.qiniuData.token = res.data.uptoken;
                    this.qiniuDomail = res.data.pc_domain + "/";
                })
                .catch((err) => {
                    this.$dialog.error(err.msg || "获取七牛数据失败");
                });
        },
        confirm() {},
        pay(){
            console.log(this.uni)
            let amount = this.amount;
                let pay_image = "";
                if (this.dialogImageUrl.length != 0) {
                    pay_image = this.dialogImageUrl.join(",");
                } else {
                    return this.$dialog.error("请上传支付凭证");
                }
                let data = {      
                uni: this.uni,
                from: "frompc",
                    amount: amount,
                    pay_image: pay_image,
                    paytype:"transfer"
                };
                payMonth(data)
                    .then((res) => {
                        if (res.status == 200) {
                            this.$dialog.toast({ mes: "凭证提交成功" });
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);

                            return;
                        }
                        return this.$dialog.error(res.msg);
                    })
                    .then((err) => {
                        console.log(err);
                    });
        },
        getTransfronPay() {
            transforPay()
                .then((res) => {
                    console.log(res);
                    this.transferInfo = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        handleAvatarSuccess_one(res, file, fileList) {
            if (res.data.length) {
                this.dialogImageUrl = this.dialogImageUrl.concat(
                    res.data[0].src
                );
            }
        },
        reload() {
            this.showDialog1 = true;
            this.$router.go(-1);
        },
        open() {
            this.showDialog1 = true;
        },
    },
};
</script>
<style lang="scss" scoped>
.confirmPay {
    width: 346px;
    height: 44px;
    background: #da213d;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    line-height: 44px;
    margin: 30px auto;
}
.company-info {
    background: #fcf8f8;
    padding: 30px 20px 10px;
    box-sizing: border-box;
    margin: 55px 30px 0;
    .info {
        margin-bottom: 30px;
        font-size: 16px;
        color: #333333;
    }
    .info.red {
        color: #da213d;
    }
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.add-address-show1 {
    position: fixed;
    left: 0;
    right: 0;
    top: 150px !important;
    width: 700px;
    max-height: 700px;
    overflow-y: scroll;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.2);
    margin: auto;
    z-index: 21;
    .title1 {
        display: flex;
        width: 100%;
        height: 67px;
        align-items: center;
        background: #fbf0f0;
        justify-content: center;
        > div:nth-of-type(1) {
            font-size: 21px;
            color: #da213d;
            font-weight: bold;
        }
        img {
            display: block;
            width: 20px;
            height: 20px;
            font-size: 30px;
            color: #999999;
            position: absolute;
            right: 32px;
            cursor: pointer;
        }
    }
    .add-input {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 60px 30px !important;
    }
    .rule-form {
        width: 460px;
        button {
            width: 140px;
        }
    }
}
.border1 {
    padding: 30px 20px;
    box-sizing: border-box;
    border: 1px solid #eaa090;
    border-radius: 5px;

    margin: 20px 30px 0;
    box-sizing: border-box;
    width: 640px;
    .title {
        font-size: 18px;
        line-height: 18px;
    }
    .input {
        margin-top: 10px;
        margin-bottom: 20px;
        width: 310px;
        border-bottom: 1px solid #cccccc;
        display: flex;
        align-items: center;
        input {
            width: 100%;
            height: 50px;
            border: 0;
            font-size: 24px;
            &:focus {
                outline: 0;
            }
        }
        div {
            font-size: 24px;
            font-weight: bold;
        }
    }
}
.dialog-shade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    background-color: rgba($color: #000000, $alpha: 0.4);
}
</style>